<template>
  <div class="main">
    <Form ref="loginForm" class="user-layout-login" :model="form" :rules="formItemRules" @keydown.enter.native="handleSubmit">
      <FormItem prop="username">
        <Input v-model="form.username" placeholder="请输入用户名\手机号\邮箱"/>
        <span slot="prepend">
          <Icon :size="16" type="ios-person"></Icon>
        </span>
      </FormItem>
      <FormItem prop="password">
        <Input type="password" v-model="form.password" placeholder="请输入密码"/>
        <span slot="prepend">
          <Icon :size="14" type="md-lock"></Icon>
        </span>
      </FormItem>
      <FormItem>
        <Checkbox v-model="form.auto">自动登录</Checkbox>
        <router-link :to="{ name: 'recover', params: { user: 'aaa'} }" class="forge-password">忘记密码</router-link>
        <router-link class="register" :to="{ name: 'register' }">注册账户</router-link>
      </FormItem>
      <FormItem>
        <Button @click="handleSubmit" :loading="loading" type="primary" long>登录</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import { timeFix } from '@/utils/util'
import { mapActions } from 'vuex'
export default {
  name: 'LoginForm',
  data () {
    return {
      loading: false,
      form: {
        username: '',
        password: '',
        auto: true
      },
      formItemRules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    ...mapActions(['Login', 'Logout']),
    handleSubmit () {
      const {
        Login
      } = this
      this.$refs['loginForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          const username = this.form.username
          const password = this.form.password
          const auto = this.form.auto
          Login({ username, password, auto }).then(res => {
            this.$router.push({ name: 'home' })
            this.loginSuccess(res)
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    loginSuccess (res) {
      // 延迟 1 秒显示欢迎信息
      setTimeout(() => {
        this.$Notice.success({
          title: '欢迎',
          desc: `${timeFix()}，欢迎回来`
        })
      }, 1000)
    }
  },
  mounted: function () {
  }
}
</script>

<style lang="less" scoped>
  .user-layout-login {
    label {
      font-size: 14px;
    }

    .getCaptcha {
      display: block;
      width: 100%;
      height: 40px;
    }

    .forge-password, .register {
      margin-left: 10px;
      font-size: 14px;
      float: right;
    }

    button.login-button {
      padding: 0 15px;
      font-size: 16px;
      height: 40px;
      width: 100%;
    }

    .user-login-other {
      text-align: left;
      margin-top: 24px;
      line-height: 22px;

      .item-icon {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.2);
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #2d8cf0;
        }
      }

    }
  }
</style>
